/* eslint-disable react-hooks/exhaustive-deps */
import { SearchBar, Grid, NoticeBar, InfiniteScroll, Card } from "antd-mobile";
import LoopPicture from "../../components/swiper";
import "./home.scss";
import { dalImg } from "../../utils/tools";
import { useState } from "react";
import { loadGoodsAPI } from "../../services/goods";
import { useNavigate } from "react-router-dom";

function Home() {
  const [goods, setGoods] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const nav = useNavigate();

  const loadGoodsDate = () => {
    loadGoodsAPI(page).then((res) => {
      // console.log(res);
      setGoods([...goods, ...res.data.list]);
      setPage(page + 1);
      setHasMore(res.data.list.length > 0);
    });
  };

  const loadMore = () => {
    loadGoodsDate();
  };

  return (
    <div className="home">
      <div
        className="search"
        style={{
          overflow: "hidden",
          height: "50px",
          backgroundColor: "pink",
        }}
      >
        <SearchBar
          onFocus={() => {
            nav("/searchDetail");
          }}
          style={{ margin: "10px 10px" }}
          placeholder="请输入搜索药品"
        />
      </div>
      <NoticeBar
        content="寻医问药的引路人，品质生活的指南针。健康生活，一“点”不难。"
        color="alert"
      />
      <div className="swiper">
        <LoopPicture />
      </div>
      <div className="category">
        <Card style={{ backgroundColor: "#ffc0cb5e" }}>
          <Grid columns={4} gap={10} style={{ justifyItems: "center" }}>
            <Grid.Item>
              <div
                className="item"
                style={{
                  backgroundColor: "#ff000070",
                }}
                onClick={() => {
                  nav("/lists");
                }}
              >
                在线问诊
              </div>
            </Grid.Item>
            <Grid.Item>
              <div
                className="item"
                style={{
                  backgroundColor: "#0062ff78",
                }}
                onClick={() => {
                  nav("/searchDetail");
                }}
              >
                云药房
              </div>
            </Grid.Item>
            <Grid.Item>
              <div
                className="item"
                style={{
                  backgroundColor: "#ff77008e",
                }}
              >
                医院挂号
              </div>
            </Grid.Item>
            <Grid.Item>
              <div
                className="item"
                style={{
                  backgroundColor: "#5500ff89",
                }}
              >
                健康资讯
              </div>
            </Grid.Item>
          </Grid>
        </Card>
      </div>
      <div style={{ textAlign: "center" }}>
        <img
          width="100%"
          height="130px"
          src="https://img2.baidu.com/it/u=2959638415,1800796923&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=383"
          alt="图丢了"
        />
        <Card
          title="健康资讯"
          extra={
            <a href="#" style={{ textDecoration: "none" }}>
              More
            </a>
          }
        >
          <p
            style={{
              width: "90%",
              overflow: "hidden",
              whiteSpace: "nowrap",
              textOverflow: "ellipsis",
              margin: "0 auto",
            }}
          >
            <a href="#" style={{ textDecoration: "none" }}>
              【健康知识进万家】药补不如食补，吃对了才健康！春季饮食坚持六原则~
            </a>
          </p>
        </Card>
      </div>
      <div className="goods-container">
        <p
          style={{
            padding: "5px 2px",
            margin: "5px 0",
            textAlign: "center",
            fontSize: "16px",
            boxShadow: "inset 0 5px 0 #00ffcc97",
          }}
        >
          春雨热卖
        </p>
        <div className="goods-list">
          {goods.map((item) => (
            <div
              className="good"
              key={item.id}
              onClick={() => {
                nav("/goods/" + item.id);
              }}
            >
              <img
                width="120px"
                height="120px"
                src={dalImg(item.image)}
                alt="图丢了"
              />
              <p>{item.name}</p>
            </div>
          ))}
        </div>
        <InfiniteScroll threshold="0" loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  );
}

export default Home;
